<template>
	<div class="father">
		<h3>父组件</h3>
		房产：{{ house }}
		<button @click="changeToy">修改child1 的玩具</button>
		<button @click="changeComputer">修改child2的电脑</button>
		<button @click="incrementAllBooks">增加所有孩子的书本数</button>
		<button @click="allChild($refs)">增加所有孩子的书本数-这是另一种方式</button>

		<!-- 通过ref 拿到child -->
		<Child1 ref="c1"></Child1>
		<Child2 ref="c2"></Child2>



	</div>
</template>

<script setup lang="ts" name="Father">
import Child1 from './Child1.vue';
import Child2 from './Child2.vue';
import { ref } from 'vue';


let house = ref(8)
let c1 = ref()
let c2 = ref()

function changeToy() {
	//直接修改是不生效的，因为 c1中的toy 并没有暴露出来
	c1.value.toy = '小汽车'
}

function changeComputer() {
	//同理
	c2.value.computer = '华为'
}

function incrementAllBooks() {
	c1.value.book_num = c1.value.book_num + 1
	c2.value.book_num = c2.value.book_num + 1
}

function allChild(refs: { [key: string]: any }) {
	console.log(refs)

	for (let key in refs) {
		refs[key].book_num = refs[key].book_num + 1
	}
}


defineExpose({
	house
})

</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-bottom: 10px;
	margin-left: 10px;
}
</style>
